<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>编辑</title>
</head>
	<style type="text/css">
		.list{
			float: left;
			width: 20%;
			height: 600px;
			overflow-y: scroll;
		}
		.part{
			width: 100%;
		}
		.one_part,.add_one{
			width: 90%;
			margin-left: 5%;
			height:200px;
			margin-top: 25px;
		}
		.one_part .pic,.add_one .pic{
			width: 100%;
			height: 100%;
			background-color: #d3d4d5;
		}
		.add_one .pic{
			line-height: 0.2em;
			font-size: 200px;
			font-family: "微软雅黑";
			text-align: center;
			color: #f3f4f5;
			border: none;
			outline: none;
		}
		.one_part .title{
			background-color: #d3d4d5;
			opacity: 0.5;
			font-size: 12px;
			font-family: "微软雅黑";
			text-align: center;
		}
		.editArea{
			width: 80%;
			float: left;
		}
		.editArea input{
			width: 99%;
			height: 100px;
			margin: 10px 5px;
			border:1px solid #d3d4d5;
			font-family: "思源黑体";
			font-size: 50px;
			color: #535455;
		}
		.editArea hr{
			border:1px solid #d3d4d5;
			margin: 10px; 5px;
		}
		#editor{
			width: 99%;
			height: 400px;
			border-color: #d3d4d5;
			margin: 10px 5px;
			margin-bottom: 0;	
			resize: none;
		}
		.editArea button{
			border:none;
			border-radius: 25px;
			background-color: #1BD1A5;
			color: #ffffff;
			font-family: "思源黑体";
			font-size: 30px;
			height: 80px;
			width: 160px;
			position: fixed;
			top:650px;
			left: 80px;
		}
	</style>
<body>
	
	<div class="list">
		<div class="part">
			<div class="one_part">
				<div class="pic"></div>
				<div class="title">你好旧时光</div>
			</div>
			<div class="one_part">
				<div class="pic"></div>
				<div class="title">你好旧时光</div>
			</div>
			<div class="one_part">
				<div class="pic"></div>
				<div class="title">你好旧时光</div>
			</div>
			<div class="one_part">
				<div class="pic"></div>
				<div class="title">你好旧时光</div>
			</div>
			<div class="one_part">
				<div class="pic"></div>
				<div class="title">你好旧时光</div>
			</div>
			<div class="one_part">
				<div class="pic"></div>
				<div class="title">你好旧时光</div>
			</div>
			<div class="one_part">
				<div class="pic"></div>
				<div class="title">你好旧时光</div>
			</div>
			<div class="one_part">
				<div class="pic"></div>
				<div class="title">你好旧时光</div>
			</div>
			<div class="add_one">
				<button class="pic">+</button>
			</div>
		</div>
	</div>
	<div class="editArea">
		<input type="text" name="title"/>
		<input type="text" name="author" style="height:50px;font-size: 30px;" />
		<hr>
		<textarea cols="" rows="" id="editor"></textarea>
		<button type="submit">提交</button>
	</div>

	<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <script type="text/javascript">
    	var ue = UE.getEditor('editor');
    </script>
</body>
</html>